<template>
  <div id="order-detail-page" v-if="order.id>0" :style="{
    minHeight:(this.getWinSize().height-this.getSafeArea().top-145)+'px'
  }">
    <div style="width: 100%; position: fixed; top: 5px; background: #FFFFFF; z-index: 5" :style="{
      height:this.getSafeArea().top+'px'
    }" >

    </div>


    <div class="page-title" :style="{top:(this.getSafeArea().top)+'px'}">
      <div id="back-button" @click="$router.push('/OrderList')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>订单详情</span>
      <button v-if="order.orderGroupId>0 && order.status.id!==5" v-text="''+order.orderGroupStatus.name+''" @click="$router.push({
      name:'OrderGroup',
      query:{
        id:order.id,
      }
      })"></button>
    </div>
    <div>
      <div class="shop-and-product-box"
           style="position: relative;"
           :style="{top:(this.getSafeArea().top-5)+'px'}">
        <div class="shop-info" @click="$router.push('/ShopHome?id='+order.shopId)">
          <div class="shop-logo">
            <img :src="order.shopLogo"/>
          </div>
          <div class="shop-name" v-text="order.shopName"></div>
        </div>
        <product-list-item v-for="(product,index) in orderProductList" :order-status="order.status.id" :key="index"
                           :show-type="4" :curr-product="{
          orderProductId:product.id,
          id:product.productId,
          name:product.productName,
          image:product.productImage,
          model:product.productModel,
          nums:product.productNums,
          price:product.productPrice,
          applyType:product.applyType,
          applyStatus:product.applyStatus,
          applyId:product.applyId,
        }"/>
        <div class="c"></div>
      </div>


      <!--物流信息-->
      <div class="express-info"
           style="position: relative;"
           :style="{top:(this.getSafeArea().top-10)+'px'}"
           v-if="order.status.id>0 && orderExpress && orderExpress.content" @click="$router.push({
      name:'OrderExpress',
      query:{
        id:order.id
      }
      })">
        <div class="icon-box">
          <i class="iconfont icon-huoche"></i>
        </div>
        <div class="item">
          <div class="status-box">
            <div class="tag-name">
              物流状态: <span v-text="orderExpress.content[0].tagName"></span>
            </div>
            <div class="time"> {{ orderExpress.content[0].createdAt }}</div>
          </div>
          <div class="info-box">
            <div class="info ovd_s">
              {{ orderExpress.content[0].content }}
            </div>
          </div>
        </div>
        <div class="c"></div>
      </div>

      <!--收货地址信息-->
      <div class="address-box"
           style="position: relative;"
           :style="{top:(this.getSafeArea().top-20)+'px'}"
           v-if="order.sendType.id!==2">
        <!--      <div class="title-bar">地址信息</div>-->
        <address-item :addressData="orderAddress" :show-type="1" :is-re-choose="false"/>
        <div class="bottom-bar"></div>
      </div>

      <!--订单信息-->
      <div class="order-info"
           style="position: relative; padding-bottom: 15px;"
           :style="{top:(this.getSafeArea().top-25)+'px'}">
        <div class="title">订单信息</div>
        <div class="row">
          <div class="name">订单编号:</div>
          <div class="value">
            <span v-text="order.orderNo" @click="copyClipBoard(order.orderNo)"></span>
            <el-tag type="success" @click="copyClipBoard(order.orderNo)">复制</el-tag>
          </div>
        </div>
        <div class="row">
          <div class="name">订单价格:</div>
          <div class="value">
            <span class="red b" v-text="'' + ToMoney(order.productPrice)"></span>
          </div>
        </div>
        <div class="row" v-if="order.score>0">
          <div class="name">使用积分:</div>
          <div class="value">
            <span class="red b" v-text="order.score"></span>
          </div>
        </div>
        <div class="row" v-if="order.expressPrice>0">
          <div class="name">配送费用:</div>
          <div class="value">
            <span class="red b" v-text="'+' + ToMoney(order.expressPrice)"></span>
          </div>
        </div>
        <div class="row" v-if="order.couponPrice>0">
          <div class="name">优惠券:</div>
          <div class="value">
            <span class="red b" v-text="'-' + ToMoney(order.couponPrice)"></span>
          </div>
        </div>
        <div class="row" v-if="order.fullMinusPrice>0">
          <div class="name">店铺满减:</div>
          <div class="value">
            <span class="red b" v-text="'-' + ToMoney(order.fullMinusPrice)"></span>
          </div>
        </div>
        <div class="row" v-if="order.shopDiscountPrice>0">
          <div class="name">店铺特殊优惠:</div>
          <div class="value">
            <span class="red b" v-text="'-' + ToMoney(order.shopDiscountPrice)"></span>
          </div>
        </div>
        <div class="row" v-if="order.vipDiscountPrice>0">
          <div class="name">会员折扣:</div>
          <div class="value">
            <span class="red b" v-text="'-'+order.vipDiscountPrice"></span>
          </div>
        </div>
        <div class="row">
          <div class="name">实际价格:</div>
          <div class="value">
            <span class="red b" v-text="'￥' + ToMoney(order.price)"></span>
          </div>
        </div>
        <div class="row">
          <div class="name">配送方式:</div>
          <div class="value" v-if="order.sendType.id===2">
            {{ order.sendType.name }}
            (提货码: <span style="display: inline;" class="red b">{{ order.takeNumber }}</span> )
          </div>

          <div class="value" v-if="order.sendType.id===1">
            {{ order.sendType.name }}
            (送达时间: <span style="display: inline;" class="red b">{{ order.sendTime }}</span> )
          </div>

          <div class="value" v-if="order.sendType.id===0">
            {{ order.sendType.name }}
          </div>
        </div>
<!--        <div class="row" v-if="order.sendType.id===1">-->
<!--          <div class="name">店铺距离&路线:</div>-->
<!--          <div class="value">-->
<!--            &lt;!&ndash;            <el-tag  @click="goToShop" style="text-indent: 0px;" type="warning" class="b red" v-text="(order.distance).toFixed(2)+'km'"></el-tag>&ndash;&gt;-->
<!--            <el-tag  @click="goToShop" style="text-indent: 0px;" type="warning" class="b red" v-text="(shop.distance).toFixed(2)+'km'"></el-tag>-->
<!--          </div>-->
<!--        </div>-->
        <div class="row">
          <div class="name">支付方式:</div>
          <div class="value">
            <span v-if="order.payTime">{{ order.payType.name }}</span>
            <span style="color: #e3ba8f" v-if="!order.payTime">未支付</span>
          </div>
        </div>
        <div class="row">
          <div class="name">当前状态:</div>
          <div class="value"> {{ order.status.name }}</div>
        </div>
        <div class="row">
          <div class="name">是否带发票:</div>
          <div class="value" style="text-indent: 0px">
            <span>{{ order.isInvoice.name }}</span>
            <el-tag v-if="order.isInvoice.id===1 && order.invoiceFileUrl && order.invoiceFileUrl.length>0" type="success"
                    @click="showInvoiceFile()">查看发票
            </el-tag>
            <el-tag v-if="order.isInvoice.id===1 && !order.invoiceFileUrl" type="warning">未上传</el-tag>
          </div>
        </div>
        <div class="row">
          <div class="name">备注信息:</div>
          <div class="value"> {{ order.info }}</div>
        </div>
        <div class="row">
          <div class="name">下单时间:</div>
          <div class="value"> {{ order.createdAt }}</div>
        </div>
      </div>
    </div>



    <div class="bottom-bar" v-if="isInitActButton">
      <order-act-button :call-back="reloadDetail" :curr-order-params="order"/>
    </div>
  </div>
</template>

<script>
import AddressItem from '../common/AddressItem'
import ProductListItem from '../common/ProductListItem'
import OrderActButton from '../common/OrderActButton'

export default {
  name: 'OrderDetail',
  components: {OrderActButton, ProductListItem, AddressItem},
  mounted () {
    let $this=this
    $this.getDetail()
    $this.bus.$on('OrderInfoUpdate',function (id) {
      $this.order.id=0
      $this.getDetail(id)
    })
  },
  data: function () {
    return {
      isInitActButton:false,
      mainHeight:(this.getWinSize().height-this.getSafeArea().top)+'px',
      'orderAddress': {},
      'orderExpress': {},
      'allExpressList': {},
      'orderProductList': [],
      'order': {
        id:0
      },
      shop:{
        distance:0,
      }
    }
  },
  methods: {
    goToShop:function () {
      this.$router.push({
        name:'MyAMapLine',
        query:{
          endLocation:this.shop.location.join(',')
        }
      })
    },
    getShopDetail:function () {
      let $this=this
      $this.MyRequest($this.ApiDoNameMember + 'Shop/getDetail', {id:this.order.shopId}, function (shop) {
        shop.distance=(shop.distance*0.001).toFixed(2)+'km'
        $this.shop=shop
        $this.$forceUpdate()
      })
    },
    /* reloadDetail: function () {
      let $this = this
      $this.order.id = 0
      $this.$forceUpdate()
      setTimeout(function () {
        $this.getDetail()
      }, 1000)
    }, */
    showInvoiceFile: function () {
      plus.runtime.openURL(this.order.invoiceFileUrl)
    },
    reloadDetail:function () {
      let $this = this
      $this.isInitActButton=false
      setTimeout(function () {
        $this.getDetail()
      },500)
    },
    getDetail: function (id) {
      let $this = this
      let form = {}
      if (!id){
        if ($this.$route.query.orderNo) {
          form.orderNo = $this.$route.query.orderNo
        } else {
          form.id = $this.$route.query.id
        }
      }else{
        form.id=id
      }
      $this.MyRequest($this.ApiDoNameMember + 'Order/getDetail', form, function (data) {
        $this.order = data.order
        $this.isInitActButton=true
        $this.orderAddress = data.orderAddress
        if (data.orderExpress && data.orderExpress.content) {
          data.orderExpress.content = data.orderExpress.content.reverse()
        }
        $this.orderExpress = data.orderExpress
        $this.orderProductList = data.orderProductList
        if (data.order.sendType.id){
          $this.getShopDetail()
        }
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 售后(退换货)
    apply: function (item) {
      this.$router.push({
        name: 'OrderApply',
        query: {
          id: item.id
        }
      })
    },
    pay: function (order) {
      let $this = this
      this.bus.$emit('ChooseOrderPayTypeDialogCallBus', order, function () {
        $this.getDetail()
      })
    },
    // 订单操作: 取消订单,确认收货
    act: function (id, act) {
      let $this = this
      var actRequest = function (act, reason) {
        var form = {id: id, status: act}
        if (act === 5) {
          form.cancelReason = reason
        }
        $this.myLoading = true
        $this.MyRequest($this.ApiDoNameMember + 'Order/act', form, function (data) {
          $this.myLoading = false
          $this.getOrderList()
          $this.$forceUpdate()
        }, function (msg) {
          $this.myLoading = false
          $this.$message.error(msg)
        })
      }

      if (act === 5) {
        $this.$prompt('请输入 取消原因', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '取消原因错误格式不正确'
        }).then(({value}) => {
          if (value.length < 5) {
            return $this.successTip('取消原因必须于5个字符')
          }
          actRequest(act, value)
        })
      } else {
        $this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提示', {
          customClass: 'my-confirm-box',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          backType: 'warning'
        }).then(() => {
          actRequest(act)
        }).catch(() => {

        })
      }

    },
    // 订单评价
    reply: function (id, type) {
      var query = {
        id: id
      }
      if (type) {
        query.type = type
      }
      this.$router.push({
        name: 'OrderReply',
        query: query
      })
    }
  }
}
</script>

<style scoped>

</style>
